<!-- 5S检查清单 检查项目-检查明细 -->
<template>
	<view class="content">
		<u-navbar :fixed="false" title="5S检查清单" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
		</u-navbar>
		<view class="nav-wrap">
			<scroll-view class="nav-wrap-left">
				<view class="nav-wrap-left-item" :class="selectedObj.index==index ? 'active' : ''"
					v-for="(item,index) in navList" :key="item.ItemTypeID" @click="switchLeft(item,index)">
					<view class="nav-wrap-left-item-left" :class="selectedObj.index==index ? 'on' : ''"></view>
					<text class="nav-wrap-left-item-content">
						{{item.ItemTypeName}}
					</text>
					<view class="nav-wrap-left-item-right" :class="item.score>0 ? 'on' : ''">
						{{item.score>0 ? item.score : ''}}
					</view>
				</view>
			</scroll-view>
			<scroll-view class="nav-wrap-right">
				<view class="nav-wrap-right-item" v-for="(item,index) in selectedObj.children" :key="item.DailyFSDeID"
					@click="score(item,index)">
					<view class="nav-wrap-right-item-left" :class="item.Score>0 ? 'on' : ''">
						{{item.Score>0 ? item.Score : ''}}
					</view>
					<text class="nav-wrap-right-item-content">
						{{item.ItemName}}
					</text>
					<view class="nav-wrap-right-item-right">
						<uni-icons v-if="item.IsSerious==1" type="star-filled" size="18" color="#ff0000"></uni-icons>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="totalScore">
			<text class="totalScore-label">合计扣分:</text>
			<text class="totalScore-value">{{totalScore}}</text>
		</view>

		<u-action-sheet :show="showActionSheet" :title="actionTitle" :actions="actionList" @select="selectAction"
			cancelText="取消" @close="hideAction"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DailyFSID: 0,
				actionTitle: '操作选项',
				showActionSheet: false,
				actionList: [{
						option: 'add',
						name: '新增检查',
						subname: "提交当前项目问题反馈和评分",
						color: '#5cc2c4',
						fontSize: '18'
					},
					{
						option: 'history',
						name: '查看历史',
						subname: "查看当前项目历史问题和评分",
						color: '#f8e1a0',
						fontSize: '18'
					},
				],
				titleName: '',
				navList: [],
				totalScore: 0,
				selectedObj: {
					index: -1,
					item: {},
					children: []
				},
				DailyFSDeID: 0, // 检查明细记录ID
				IsSerious: 0 // 是否重要
			};
		},
		created() {

		},
		mounted() {

		},
		methods: {
			getCheckData(id) {
				let that = this;
				this.$utils.showLoading();
				that.Request.request('5S_GetDailyDetail', {
						DailyFSID: id
					}, function(data) {
						that.$utils.hideLoading();
						that.navList = data.data.ds2;
						that.navList = that.navList.map(item => ({
							...item,
							score: data.data.ds1.filter(t => t.ItemTypeID == item.ItemTypeID).reduce((
								score, item) => score + item.Score, 0),
							children: data.data.ds1.filter(t => t.ItemTypeID == item.ItemTypeID)
						}));
						that.selectedObj = {
							index: 0,
							item: that.navList[0],
							children: that.navList[0].children
						}
						that.totalScore = that.navList.reduce((total, item) => total + item.score, 0);
					}, function(err) {

					}, that.Request.IPAgreement() + that.Request.serverIP() +
					'/Frame/SqlData', 1)
			},
			// 切换左侧导航
			switchLeft(item, index) {
				// console.log(item);
				// console.log(index);
				let that = this;
				if (that.selectedObj.index != index) {
					that.selectedObj = {
						index: index,
						item: item,
						children: item.children
					}
				}
			},
			// 选择右侧检查明细打分
			score(item, index) {
				this.showActionSheet = true;
				this.DailyFSDeID = item.DailyFSDeID; // 切换检查明细记录ID
				this.IsSerious = item.IsSerious;
			},

			selectAction(action) {
				console.log(action);
				if (action.option == 'add') {
					uni.navigateTo({
						url: '/st_5s/CheckSubmit?DailyFSDeID=' + this.DailyFSDeID + '&IsSerious=' + this.IsSerious,
					})
				}
				if (action.option == 'history') {
					uni.navigateTo({
						url: '/st_5s/CheckHistory?DailyFSDeID=' + this.DailyFSDeID,
					})
				}
			},

			hideAction() {
				this.showActionSheet = false;
			}
		},
		onLoad(option) {
			if (option.DailyFSID) {
				this.getCheckData(option.DailyFSID);
				this.DailyFSID = option.DailyFSID;
			}
		},
		onShow() {
			this.getCheckData(this.DailyFSID)
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f2f2f2;

		.nav-wrap {
			display: flex;
			height: calc(100vh - (44px + 30px + env(safe-area-inset-top) + env(safe-area-inset-bottom) / 2));

			&-left {
				width: 35vw;
				height: 100%;
				background-color: #f6f6f6;

				&-item {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					min-height: 50px;
					padding: 5px 5px 5px 0;
					font-size: 13px;
					font-weight: 500;

					&-left {
						width: 3px;
						height: 20px;
					}

					&-left.on {
						background-color: #ff0000;
					}

					&-content {
						flex: 1;
						margin-left: 5px;
					}

					&-right {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 18px;
						height: 18px;
						border-radius: 9px;
					}

					&-right.on {
						background-color: #ff0000;
						color: #ffffff;
						margin-left: 5px;
					}
				}

				&-item.active {
					background-color: #ffffff;
				}
			}

			&-right {
				width: 65vw;
				height: 100%;
				background-color: #ffffff;

				&-item {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 5px;
					min-height: 50px;
					font-size: 13px;
					font-weight: 400;
					border-bottom: 1px solid #f2f2f2;

					&-left {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 18px;
						height: 18px;
						border-radius: 9px;
					}

					&-left.on {
						background-color: skyblue;
						color: #ffffff;
					}

					&-content {
						flex: 1;
						margin-left: 5px;
						padding: 3px 0;
					}

					&-right {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 20px;
						margin-left: 5px;
					}

				}

				&-item:last-child::after {
					border-bottom: none;
				}

				&-item.active {}
			}
		}

		.totalScore {
			display: flex;
			align-items: center;
			padding: 5px 20px;
			width: 100vw;
			height: 30px;
			font-size: 14px;
			font-weight: 500;

			&-label {
				color: #232323;
			}

			&-value {
				margin-left: 5px;
				color: #FF0000;
			}
		}
	}
</style>